<template>
  <div>
    <div class="hello">
      <lazy-component>
        <ul>
          <li v-for="item in data" :key="item.comic_id">
            <router-link
              :to="{ name: 'present', query: { id: item.comic_id } }"
            >
              <div class="photo">
                <img v-lazy="item.img" alt="" />
              </div>
              <div class="bott">
                <div class="mname">
                <p>{{ item.title }}</p>
                <span v-for="el in item.styles" :key="el.id">{{
                  el.name
                }}</span>
              </div>
              <div class="amount">
                <p>{{ item.sub_title }}</p>
                <div>
                  <span></span>
                  <p>{{ item.comment_total | aaa }}</p>
                </div>
              </div>
              </div>
              
            </router-link>
          </li>
        </ul>
      </lazy-component>
    </div>
  </div>
</template>

<script>
import { get } from "@/http/request";
export default {
  name: "HelloWorld",

  data() {
    return {
      data: [
        // { img: "https://img01.yzcdn.cn/vant/apple-1.jpg" },
        // { img: "https://img01.yzcdn.cn/vant/apple-2.jpg" },
      ],
    };
  },
  methods: {
    async init() {
      
      await get("https://apis.netstart.cn/mbcomic/HomeRecommend", {
        params: {},
      }).then((res) => {
        console.log(res.data.list);
        this.data = res.data.list;
      });
    },
  },
  filters: {
    // 过滤小数点
    aaa(value) {
      if (value) {
        if (value > 10000) {
          let str = value / 10000;
          value = str.toFixed(2) + "w";
        }
      }
      return value;
      // return typeof value == 'number'? `${value}是数字`: `${value}是字符串`;
    },
  },
  created() {
    this.init();
    // this.$toast({
    //     message: "加载中...",
    //     forbidClick: true,
    //     type: "loading",
    //   });
  },
  mounted() {},
  props: {
    msg: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
  padding: 0 10px;
  margin: 0;
  margin-top: 15px;
  width: 100%;
  li {
    width: 100%;
    // height: 251px;
    margin-bottom: 10px;
    a {
      width: 100%;
      // padding: 0;
      text-decoration: none;
      color: #000;
      background-color: #fff;
      z-index: 1000;
      display: flex;
      flex-flow: column;
      .photo {
        width: 100%;
        // height: 190px;
        // background-image: url(../assets/present.jpg);
        border-radius: 10px;
        overflow: hidden;
        img {
          width: 100%;
          border-radius: 10px;
        }
      }
      .bott{
        width: 100%;
        .mname {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-content: center;
        p {
          font-size: 20px;
          color: #212121;
          margin-right: 10px;
        }
        span {
          display: block;
          padding: 5px;
          font-size: 12px;
          color: #90959b;
          background-color: #eee;
          border-radius: 5px;
        }
      }
      .amount {
        margin-top: 5px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-content: center;
        color: #90959b;
        font-size: 14px;
        div {
          display: flex;
          align-items: center;
          span {
            display: block;
            contain: "";
            width: 16px;
            height: 16px;
            background-image: url(../assets/message-2-line.png);
            background-size: cover;
          }
          p {
            margin-left: 10px;
          }
        }
      }
      }
      
    }
  }
}
</style>
